import { useEffect } from 'react';
import { useDispatch, useSelector } from 'umi';
import AgeColumn from './component/AgeColumn';
import Column from './component/Column';
import OldStaffTable from './component/OldStaffTable';
import Pie from './component/Pie';
import StaffAmount from './component/StaffAmount';
import './index.less';

const Dashboard = () => {
  const { amountDataList, pieList, columnList, marriageData, staffData, constellationData } = useSelector(
    (state: any) => state.dashboard,
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: 'dashboard/initDashboardList' });
  }, []);

  return (
    <div className="dashboard-container">
      {/* 员工展示组件 执行四次 */}
      {amountDataList.map((item: any, index: any) => (
        <StaffAmount key={index} {...item} />
      ))}
      {/* 饼状图处理 学历情况，员工性别 */}
      {pieList.map((item: any, index: any) => (
        <Pie {...item} key={index} />
      ))}
      {/* 年龄柱状图 */}
      {pieList[1] && <AgeColumn {...pieList[1]} />}
      {/* 员工婚姻状况 */}
      <Pie {...marriageData} />
      {columnList.map((item: any, index: any) => (
        <Column key={index} {...item} />
      ))}
      {/* 最老的十个员工 */}
      <OldStaffTable {...staffData} />
      {/* 星座分布 */}
      <Pie {...constellationData} />
    </div>
  );
};

export default Dashboard;
